console.log('page - test');
window.onresize = function() {
    
}

const CanvasTable = canvasTable.CanvasTable;

ctable = new CanvasTable(document.querySelector('#root'));
const originCols = [ //标题栏
    {field: 'index', title: '名次', sort: false, fixed: true, align: 'center', titleAlign: 'center', width: null,
    },
    {field: 'nick', title: '昵称', sort: false, align: 'center', titleAlign: 'center', width: 240,
    },
    {field: 'gameRate', title: '收益率', align: 'center', titleAlign: 'center', sort: true, width: 360,
    },
    {field: 'gameScore', title: '得分', align: 'center', sort: true, width: 248,
    },
    {field: 'avgScore', title: '平均分', sort: false, align: 'center', width: 248,
    },
    {field: 'gameNum', title: `训练局数`, sort: false, align: 'center', width: 360,
    },
    {field: 'redoNum', title: '重练', sort: false, align: 'center', width: 248,
    },
];
var list = [
    {index: 1, nick: '昵称1', gameRate: 0.013, gameScore: 70.1, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 2, nick: '昵称2', gameRate: 0.012, gameScore: 70.2, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 3, nick: '昵称3', gameRate: 0.03, gameScore: 70.3, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 4, nick: '昵称4', gameRate: 0.04, gameScore: 70.4, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 5, nick: '昵称5', gameRate: 0.05, gameScore: 70.5, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 6, nick: '昵称6', gameRate: 0.06, gameScore: 70.6, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 7, nick: '昵称7', gameRate: 0.07, gameScore: 70.7, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 8, nick: '昵称8', gameRate: 0.08, gameScore: 70.8, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 9, nick: '昵称9', gameRate: 0.09, gameScore: 70.9, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 10, nick: '昵称10', gameRate: 0.091, gameScore: 71.2, avgScore: 65, gameNum: 119, redoNum: 30},
    {index: 11, nick: '昵称11', gameRate: 0.092, gameScore: 72.2, avgScore: 65, gameNum: 119, redoNum: 30},
];
for(let i = 0; i<300; i++) {
    list.push({...list[0], index: 12+i})
}
let cols = originCols;
let sortObject = null;
let tableLeft = 0;
let sortedList = list;
const getIndexOf = (ia) => {
    const r = [];
    ia.forEach(i => {
        r.push(originCols[i]);
    })
    return r;
}
function sortListBy(key, sortType) {
    if (sortType == CanvasTable.SORT_NONE) {
        return list;
    } else if (sortType == CanvasTable.SORT_ASC) {
        return list.slice().sort((a,b) => {
            return a[key] - b[key];
        })
    } else if (sortType == CanvasTable.SORT_DESC) {
        return list.slice().sort((a,b) => {
            return b[key] - a[key];
        })
    }
}
function renderTable() {
    ctable.init({
        designWidth: 750,
        scrollbarWidth: 16,
        headHeight: 72,
        rowHeight: 128,
        fontSize: 28,
        maxHeight: Math.floor(window.innerHeight * 0.8),
        // borderColor: '#efefef',
        // headColor: '#666',
        // headBackgroundColor: '#efefef',
        // scrollbarForegroundColor: '#f00',
        // scrollbarBackgroundColor: '#0f0',
        // scrollbarCornerColor: '#00f',
        // color: '#111',
        cols,
        list: sortedList,
        left: tableLeft,
        sortObject,
        // sortArrowColor: '#999',
        // sortArrowActiveColor: '#FF4B30',
    })
    const html = ctable.exportHtml('test export');
    console.log(html);
}
ctable.onclick = (cell) => {
    console.log('on click cell: ', cell, cell.col.field);
}
ctable.onsort = (cell, nextSortObject) => {
    // console.log(cell, nextSortObject);
    if (nextSortObject) {
        const type = nextSortObject.type;
        if (type != CanvasTable.SORT_NONE) {

        }
        sortObject = nextSortObject;
        tableLeft = ctable.left;
        sortedList = sortListBy(nextSortObject.field, nextSortObject.type);
        renderTable();
    }
}
renderTable();